<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Buttons | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Plugins For This Page -->
  <link rel="stylesheet" href="../../global/vendor/ladda-bootstrap/ladda.min.css?v2.2.0">

  <!-- Page -->
  <link rel="stylesheet" href="../assets/examples/css/uikit/buttons.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../structure/overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../structure/breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Basic UI</li>
      </ol>
      <h1 class="page-title">Buttons</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Edit">
          <i class="icon wb-pencil" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Refresh">
          <i class="icon wb-refresh" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
        data-original-title="Setting">
          <i class="icon wb-settings" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="page-content">
      <!-- Panel General Button -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">General Button</h3>
        </div>

        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-12">
              <!-- Example Default Button -->
              <div class="example-wrap">
                <h4 class="example-title">Default Button</h4>
                <p>Use any of the available button classes to quickly create a styled
                  button . We provide a variety of colors for you to express different
                  emotions.</p>
                <div class="row">
                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-default">Default</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-blue-grey-200"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#e4eaec</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-blue-grey-300"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#ccd5db</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-blue-grey-400"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#76838f</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-primary">Primary</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-primary-600"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#62a8ea</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-primary-500"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#89bceb</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-primary-700"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#4e97d9</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-success">Success</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-green-600"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#46be8a</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-green-500"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#5cd29d</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-green-700"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#36ab7a</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-info">Info</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-cyan-600"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#57c7d4</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-cyan-500"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#77d6e1</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-cyan-700"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#47b8c6</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-warning">Warning</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-orange-600"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#f2a654</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-orange-500"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#f4b066</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-orange-700"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#e79857</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-4 col-lg-2">
                    <div class="example">
                      <ul class="list-unstyled">
                        <li class="margin-bottom-20">
                          <button type="button" class="btn btn-block btn-danger">Danger</button>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-red-600"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Normal</p>
                            <span class="font-size-12">#f96868</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-red-500"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">Hover</p>
                            <span class="font-size-12">#fa7a7a</span>
                          </div>
                        </li>
                        <li class="margin-bottom-20">
                          <div class="pull-left color-box bg-red-700"></div>
                          <div class="margin-left-35">
                            <p class="font-size-14 grey-600 margin-0">active</p>
                            <span class="font-size-12">#e9595b</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Default Button -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-md-6">
              <!-- Example Alternative Button -->
              <div class="example-wrap">
                <h4 class="example-title">Alternative Button</h4>
                <p>Use a classes <code>.btn-outline</code> to quickly create a outline.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-outline btn-default">Default</button>
                  <button type="button" class="btn btn-outline btn-primary">Primary</button>
                  <button type="button" class="btn btn-outline btn-success">Success</button>
                  <button type="button" class="btn btn-outline btn-info">Info</button>
                  <button type="button" class="btn btn-outline btn-warning">Warning</button>
                  <button type="button" class="btn btn-outline btn-danger">Danger</button>
                  <button type="button" class="btn btn-outline btn-dark">dark</button>
                </div>
              </div>
              <!-- End Example Alternative Button -->
            </div>

            <div class="col-md-6">
              <!-- Example Rounded Button / Squard Button -->
              <div class="example-wrap">
                <h4 class="example-title">Rounded Button / Squard Button</h4>
                <p>Round button and the square button can be used to distinguish th
                  different behavior or style.</p>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="example example-buttons">
                      <div>
                        <button type="button" class="btn btn-round btn-outline btn-default btn-lg">Large</button>
                      </div>
                      <div>
                        <button type="button" class="btn btn-round btn-outline btn-default">Default</button>
                      </div>
                      <div>
                        <button type="button" class="btn btn-round btn-outline btn-default btn-sm">Small</button>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-6">
                    <div class="example example-buttons">
                      <div>
                        <button type="button" class="btn btn-squared btn-outline btn-default btn-lg">Large</button>
                      </div>
                      <div>
                        <button type="button" class="btn btn-squared btn-outline btn-default">Default</button>
                      </div>
                      <div>
                        <button type="button" class="btn btn-squared btn-outline btn-default btn-sm">Small</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Rounded Button / Squard Button -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-md-6">
              <!-- Example Sizing -->
              <div class="example-wrap">
                <h4 class="example-title">Sizing</h4>
                <p>Size might vary from smaller screen to a larger screen. We made
                  few sizes that are pixel perfect and resposive.
                  <br/> Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>,
                  or <code>.btn-xs</code> for additional sizes.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-outline btn-default btn-lg">Large Button</button>
                  <button type="button" class="btn btn-outline btn-default">Default Button</button>
                  <button type="button" class="btn btn-outline btn-default btn-sm">Small Button</button>
                  <button type="button" class="btn btn-outline btn-default btn-xs">Tiny Button</button>
                </div>
              </div>
              <!-- End Example Sizing -->
            </div>

            <div class="col-md-6">
              <!-- Example Block Button With Icon -->
              <div class="example-wrap">
                <h4 class="example-title">Block Button With Icon</h4>
                <p>Create block level buttons,with by adding add <code>.btn-block</code>                  .</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-default btn-outline btn-block"><i class="icon wb-menu pull-right" aria-hidden="true"></i>Default</button>
                  <button type="button" class="btn btn-primary btn-block btn-round"><i class="icon wb-menu" aria-hidden="true"></i>Primary</button>
                </div>
              </div>
              <!-- End Example Block Button With Icon -->
            </div>
          </div>

          <div class="row row-lg">
            <div class="col-md-6 col-lg-4">
              <!-- Example Button With Direction -->
              <div class="example-wrap">
                <h4 class="example-title">Button With Direction</h4>
                <p>Create buttons with directions by adding add <code>.btn-up</code>,
                  <code>.btn-right</code>, <code>.btn-bottom</code> or <code>.btn-left</code>                  .</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-direction btn-up btn-primary">Up Button</button>
                  <button type="button" class="btn btn-direction btn-right btn-warning">Right Button</button>
                  <button type="button" class="btn btn-direction btn-bottom btn-success btn-outline">Down Button</button>
                  <button type="button" class="btn btn-direction btn-left btn-danger btn-outline">Left Button</button>
                </div>
              </div>
              <!-- End Example Button With Direction -->
            </div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Button Animation -->
              <div class="example-wrap">
                <h4 class="example-title">Button Animation</h4>
                <p>A button can animate to show hidden content. Modern and subtle
                  styles &amp; effects for buttons.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-animate btn-animate-side btn-success">
                    <span><i class="icon wb-download" aria-hidden="true"></i>Side Animation</span>
                  </button>
                  <button type="button" class="btn btn-animate btn-animate-vertical btn-success">
                    <span><i class="icon wb-download" aria-hidden="true"></i>Vertical
                      Animation</span>
                  </button>
                </div>
              </div>
              <!-- End Example Button Animation -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Floating Button -->
              <div class="example-wrap">
                <h4 class="example-title">Floating Button</h4>
                <p>Floating action buttons are used for a special type of promoted
                  action. They are distinguished by a circled icon floating above
                  the UI and have special motion behaviors related to morphing,
                  launching, and the transferring anchor point.
                  <br /> Use the default class <code>.btn</code> with an additional class
                  <code>.btn-floating</code> .</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-floating btn-success"><i class="icon wb-pencil" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-floating btn-success btn-sm"><i class="icon wb-pencil" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-floating btn-danger"><i class="icon wb-plus" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-floating btn-danger btn-sm"><i class="icon wb-plus" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- End Example Floating Button -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Flat And Raised Button -->
              <div class="example-wrap">
                <h4 class="example-title">Flat And Raised Button</h4>
                <p>Raised buttons behave like a piece of material resting on another
                  sheet – they lift and color on press.
                  <br/> Flat buttons are printed on the material. They do not lift but
                  fill with color on press.</p>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="example example-buttons">
                      <button type="button" class="btn btn-raised btn-primary btn-block">Normal</button>
                      <button type="button" class="btn btn-raised btn-primary btn-block active" style="background: #89bceb; border-color:#89bceb;">Hover</button>
                      <button type="button" class="btn btn-raised btn-primary btn-block active">Active</button>
                      <button type="button" class="btn btn-raised btn-primary btn-block disabled">Disabled</button>
                    </div>
                  </div>

                  <div class="col-sm-6">
                    <div class="example example-buttons">
                      <button type="button" class="btn btn-flat btn-default btn-block">Normal</button>
                      <button type="button" class="btn btn-flat btn-default btn-block active" style="background: #f8f9f9; border-color: #f8f9f9>;">Hover</button>
                      <button type="button" class="btn btn-flat btn-default btn-block active">Active</button>
                      <button type="button" class="btn btn-flat btn-default btn-block disabled">Disabled</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Flat And Raised Button -->
            </div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Pill Left Or Right -->
              <div class="example-wrap">
                <h4 class="example-title">Pill Left Or Right</h4>
                <p>Create a button like pill by <code>.btn-pill-left</code> or <code>.btn-pill-right</code>                  with <code>.btn-round</code>.</p>
                <div class="example example-buttons">
                  <div>
                    <button type="button" class="btn btn-round btn-default btn-outline btn-pill-left">Pill Left</button>
                    <button type="button" class="btn btn-round btn-default btn-outline btn-pill-right">Pill Right</button>
                  </div>
                  <div>
                    <button type="button" class="btn btn-round btn-primary btn-pill-left">Pill Left</button>
                    <button type="button" class="btn btn-round btn-primary btn-pill-right">Pill Right</button>
                  </div>
                </div>
              </div>
              <!-- End Example Pill Left Or Right -->
            </div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Button With Icon -->
              <div class="example-wrap">
                <h4 class="example-title">Button With Icon</h4>
                <p>Basic buttons are traditional buttons with borders and background
                  with an extra commponent like an icon. You can place it either
                  on the left or the right which ever you want with different color
                  opitons.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-dark"><i class="icon wb-upload" aria-hidden="true"></i> Upload</button>
                  <button type="button" class="btn btn-warning"><i class="icon wb-thumb-up" aria-hidden="true"></i> I like</button>
                  <button type="button" class="btn btn-success"><i class="icon wb-check" aria-hidden="true"></i> I agree</button>
                  <button type="button" class="btn btn-outline btn-primary"><i class="icon wb-plus" aria-hidden="true"></i> More</button>
                  <button type="button" class="btn btn-danger"><i class="icon wb-link" aria-hidden="true"></i> Link</button>
                  <button type="button" class="btn btn-info"><i class="icon wb-chat" aria-hidden="true"></i> Comment</button>
                </div>
              </div>
              <!-- End Example Button With Icon -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Icon Button -->
              <div class="example-wrap">
                <h4 class="example-title">Icon Button</h4>
                <p>Icon only button.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-icon btn-default"><i class="icon wb-map" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-grid-9" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-success"><i class="icon wb-bell" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-info"><i class="icon wb-calendar" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-warning btn-round"><i class="icon wb-time" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-danger btn-round"><i class="icon wb-plugin" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-dark btn-round"><i class="icon wb-pie-chart" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-pencil" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-primary btn-outline"><i class="icon wb-eye" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-success btn-outline"><i class="icon wb-search" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-info btn-outline"><i class="icon wb-wrench" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-warning btn-outline btn-round"><i class="icon wb-musical" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-danger btn-outline btn-round"><i class="icon wb-heart" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-dark btn-outline btn-round"><i class="icon wb-refresh" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-pure btn-default icon wb-lock"></button>
                  <button type="button" class="btn btn-pure btn-primary icon wb-thumb-up"></button>
                  <button type="button" class="btn btn-pure btn-success icon wb-share"></button>
                  <button type="button" class="btn btn-pure btn-info icon wb-random"></button>
                  <button type="button" class="btn btn-pure btn-warning icon wb-star"></button>
                  <button type="button" class="btn btn-pure btn-danger icon wb-print"></button>
                  <button type="button" class="btn btn-pure btn-dark icon wb-flag"></button>
                </div>
              </div>
              <!-- End Example Icon Button -->
            </div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Icon Dropdown -->
              <div class="example-wrap">
                <h4 class="example-title">Icon Dropdown</h4>
                <p>Icon used in the dropdown.</p>
                <div class="example example-buttons">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary dropdown-toggle" id="exampleIconDropdown1"
                    data-toggle="dropdown" aria-expanded="false">
                      <i class="icon wb-grid-9" aria-hidden="true"></i>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown1" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-warning dropdown-toggle" id="exampleIconDropdown2"
                    data-toggle="dropdown" aria-expanded="false">
                      <i class="icon wb-heart" aria-hidden="true"></i>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown2" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-danger dropdown-toggle" id="exampleIconDropdown3"
                    data-toggle="dropdown" aria-expanded="false">
                      <i class="icon wb-calendar" aria-hidden="true"></i>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown3" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                    </ul>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-dark dropdown-toggle" id="exampleIconDropdown4"
                    data-toggle="dropdown" aria-expanded="false">
                      <i class="icon wb-pie-chart" aria-hidden="true"></i>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="exampleIconDropdown4" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- End Example Icon Dropdown -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Social Icon Button -->
              <div class="example-wrap">
                <h4 class="example-title">Social Icon Button</h4>
                <p>Icon only button. But icon is social icon. </p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-icon social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-twitter"><i class="icon bd-twitter" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-linkedin"><i class="icon bd-linkedin" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-dribbble"><i class="icon bd-dribbble" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-instagram"><i class="icon bd-instagram" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-github"><i class="icon bd-github" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-skype"><i class="icon bd-skype" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-youtube"><i class="icon bd-youtube" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-evernote"><i class="icon bd-evernote" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon social-google-plus"><i class="icon bd-google-plus" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- End Example Social Icon Button -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Social In Labels -->
              <div class="example-wrap margin-lg-0">
                <h4 class="example-title">Social In Labels</h4>
                <p>It is often used at the top of a page or section. An social icon
                  must be with this variation.</p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-labeled social-facebook">
                    <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                  <button type="button" class="btn btn-labeled social-twitter">
                    <span class="btn-label"><i class="icon bd-twitter" aria-hidden="true"></i></span>Twitter</button>
                  <button type="button" class="btn btn-labeled social-google-plus">
                    <span class="btn-label"><i class="icon bd-google-plus" aria-hidden="true"></i></span>Google+</button>
                  <button type="button" class="btn btn-labeled social-linkedin">
                    <span class="btn-label"><i class="icon bd-linkedin" aria-hidden="true"></i></span>Linkedin</button>
                  <button type="button" class="btn btn-labeled social-flickr">
                    <span class="btn-label"><i class="icon bd-flickr" aria-hidden="true"></i></span>Flickr</button>
                  <button type="button" class="btn btn-labeled social-tumblr">
                    <span class="btn-label"><i class="icon bd-tumblr" aria-hidden="true"></i></span>Tumblr</button>
                </div>
              </div>
              <!-- End Example Social In Labels -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Social Button Sizes -->
              <div class="example-wrap margin-md-0">
                <h4 class="example-title">Social Button Sizes</h4>
                <p>Different Sizes for you to use with icon button or icon only button.</p>
                <div class="example example-buttons">
                  <ul class="list-unstyled pull-left">
                    <li>
                      <button type="button" class="btn btn-labeled btn-lg social-facebook">
                        <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-labeled social-facebook">
                        <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-labeled btn-sm social-facebook">
                        <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-labeled btn-xs social-facebook">
                        <span class="btn-label"><i class="icon bd-facebook" aria-hidden="true"></i></span>Facebook</button>
                    </li>
                  </ul>

                  <ul class="list-unstyled">
                    <li>
                      <button type="button" class="btn btn-icon btn-lg social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-icon social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-icon btn-sm social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                    </li>
                    <li>
                      <button type="button" class="btn btn-icon btn-xs social-facebook"><i class="icon bd-facebook" aria-hidden="true"></i></button>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- End Example Social Button Sizes -->
            </div>

            <div class="col-md-6 col-lg-4">
              <!-- Example Icon Block Button -->
              <div class="example-wrap">
                <h4 class="example-title">Icon Block Button</h4>
                <p>Icon only block button. </p>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-icon btn-block btn-primary btn-outline"><i class="icon wb-heart" aria-hidden="true"></i></button>
                  <button type="button" class="btn btn-icon btn-block social-twitter"><i class="icon bd-twitter" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- End Example Icon Block Button -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel General Button -->

      <!-- Panel Button Group -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Button Group</h3>
        </div>
        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-4 col-md-6">
              <!-- Example Basic Button Group -->
              <div class="example-wrap">
                <h4 class="example-title">Basic Button Group</h4>
                <p>Grouped buttons give users access to frequently performed actions
                  of a focused task. Wrap a series of buttons with <code>.btn</code>                  in <code>.btn-group.</code></p>
                <div class="example example-buttons">
                  <div class="btn-group" aria-label="Basic example" role="group">
                    <button type="button" class="btn btn-icon btn-pure btn-default"><i class="icon wb-play" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-icon btn-pure btn-primary"><i class="icon wb-pause" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-icon btn-pure btn-danger"><i class="icon wb-stop" aria-hidden="true"></i></button>
                  </div>

                  <div class="btn-group" aria-label="Basic example" role="group">
                    <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-play" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-pause" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-stop" aria-hidden="true"></i></button>
                  </div>

                  <div class="btn-group" aria-label="Basic example" role="group">
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-pencil" aria-hidden="true"></i>Edit</button>
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-reply" aria-hidden="true"></i>Reply</button>
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-share" aria-hidden="true"></i>Share</button>
                  </div>

                  <div class="btn-group" aria-label="Basic example" role="group">
                    <button type="button" class="btn btn-outline btn-default">Left</button>
                    <button type="button" class="btn btn-outline btn-default">Middle</button>
                    <button type="button" class="btn btn-outline btn-default">Right</button>
                  </div>
                </div>
              </div>
              <!-- End Example Basic Button Group -->
            </div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Vertical Button Group -->
              <div class="example-wrap">
                <h4 class="example-title">Vertical Button Group</h4>
                <p>Order the buttons in a group for actions that are used regularly
                  or are significant.</p>
                <div class="example example-buttons">
                  <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-flag" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-wrench" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-outline btn-default"><i class="icon wb-print" aria-hidden="true"></i></button>
                  </div>

                  <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                    <button type="button" class="btn btn-outline btn-default">1</button>
                    <button type="button" class="btn btn-outline btn-default">2</button>
                    <button type="button" class="btn btn-outline btn-default">3</button>
                  </div>

                  <div class="btn-group-vertical" aria-label="Vertical button group" role="group">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                  </div>
                </div>
              </div>
              <!-- End Example Vertical Button Group -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Button Group Sizes -->
              <div class="example-wrap">
                <h4 class="example-title">Button Group Sizes</h4>
                <p>Instead of applying button sizing classes to every button in a
                  group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>,
                  including when nesting multiple groups.</p>
                <div class="example example-buttons">
                  <div>
                    <div class="btn-group btn-group-lg" aria-label="Large button group" role="group">
                      <button type="button" class="btn btn-outline btn-default">Left</button>
                      <button type="button" class="btn btn-outline btn-default">Middle</button>
                      <button type="button" class="btn btn-outline btn-default">Right</button>
                    </div>
                  </div>

                  <div>
                    <div class="btn-group" aria-label="Default button group" role="group">
                      <button type="button" class="btn btn-outline btn-default">Left</button>
                      <button type="button" class="btn btn-outline btn-default">Middle</button>
                      <button type="button" class="btn btn-outline btn-default">Right</button>
                    </div>
                  </div>

                  <div>
                    <div class="btn-group btn-group-sm" aria-label="Small button group" role="group">
                      <button type="button" class="btn btn-outline btn-default">Left</button>
                      <button type="button" class="btn btn-outline btn-default">Middle</button>
                      <button type="button" class="btn btn-outline btn-default">Right</button>
                    </div>
                  </div>

                  <div>
                    <div class="btn-group btn-group-xs" aria-label="Extra-small button group" role="group">
                      <button type="button" class="btn btn-outline btn-default">Left</button>
                      <button type="button" class="btn btn-outline btn-default">Middle</button>
                      <button type="button" class="btn btn-outline btn-default">Right</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Button Group Sizes -->
            </div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Button Toolbar -->
              <div class="example-wrap">
                <h4 class="example-title">Button Toolbar</h4>
                <p>This group button is used to show the close relationship between
                  a number of buttons, and is usually used on edit page.</p>
                <div class="example example-buttons">
                  <div class="btn-toolbar" aria-label="Toolbar with button groups" role="toolbar">
                    <div class="btn-group">
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-bold" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-italic" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-underline" aria-hidden="true"></i></button>
                    </div>

                    <div class="btn-group">
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-align-left" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-align-center" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-primary"><i class="icon wb-align-right" aria-hidden="true"></i></button>
                    </div>

                    <div class="btn-group">
                      <button type="button" class="btn btn-icon btn-primary dropdown-toggle" data-toggle="dropdown"
                      aria-expanded="false" aria-hidden="true">
                        <i class="icon wb-wrench" aria-hidden="true"></i>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                          <a href="javascript:void(0)" role="menuitem">
                            <i class="icon wb-scissor" aria-hidden="true"></i>                            Cut
                          </a>
                        </li>
                        <li role="presentation">
                          <a href="javascript:void(0)" role="menuitem">
                            <i class="icon wb-copy" aria-hidden="true"></i> Copy
                          </a>
                        </li>
                        <li role="presentation">
                          <a href="javascript:void(0)" role="menuitem">
                            <i class="icon wb-rubber" aria-hidden="true"></i> Eraser
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="btn-toolbar" aria-label="Toolbar with button groups" role="toolbar">
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-file" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-pencil" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-folder" aria-hidden="true"></i></button>
                      <button type="button" class="btn btn-icon btn-default btn-outline"><i class="icon wb-trash" aria-hidden="true"></i></button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Button Toolbar -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Nesting Button Group -->
              <div class="example-wrap">
                <h4 class="example-title">Nesting Button Group</h4>
                <p>Place a <code>.btn-group</code> within another <code>.btn-group</code>                  when you want dropdown menus mixed with a series of buttons.</p>
                <div class="example example-buttons">
                  <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                    <button type="button" class="btn btn-primary">1</button>
                    <button type="button" class="btn btn-primary">2</button>
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-primary dropdown-toggle" id="exampleGroupDrop1"
                      data-toggle="dropdown" aria-expanded="false">
                        Dropdown
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="exampleGroupDrop1" role="menu">
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      </ul>
                    </div>
                  </div>

                  <div class="btn-group" aria-label="Button group with nested dropdown" role="group">
                    <button type="button" class="btn btn-outline btn-default">1</button>
                    <button type="button" class="btn btn-outline btn-default">2</button>
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2"
                      data-toggle="dropdown" aria-expanded="false">
                        Dropdown
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Dropdown link</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Nesting Button Group -->
            </div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Justified Button Group -->
              <div class="example-wrap">
                <h4 class="example-title">Justified Button Group</h4>
                <p>To use justified button groups with <code>&lt;button&gt;</code>                  elements, you must wrap each button in a button group. Most browsers
                  don't properly apply our CSS for justification to <code>&lt;button&gt;</code>                  elements, but since we support button dropdowns, we can work
                  around that.</p>
                <div class="example example-buttons">
                  <div class="btn-group btn-group-justified">
                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-primary">
                        <i class="icon wb-star" aria-hidden="true"></i>
                        <br>
                        <span class="text-uppercase hidden-xs">Favourites</span>
                      </button>
                    </div>

                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-info">
                        <i class="icon wb-time" aria-hidden="true"></i>
                        <br>
                        <span class="text-uppercase hidden-xs">Recent</span>
                      </button>
                    </div>

                    <div class="btn-group" role="group">
                      <button type="button" class="btn btn-success">
                        <i class="icon wb-user" aria-hidden="true"></i>
                        <br>
                        <span class="text-uppercase hidden-xs">Contacts</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Justified Button Group -->
            </div>

            <div class="clearfix visible-md-block visible-lg-block"></div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Button.Js Componenents -->
              <div class="example-wrap margin-md-0">
                <h4 class="example-title">Button.Js Componenents</h4>
                <p>
                  There are a few easy ways to quickly get started with Bootstrap, each one ...
                </p>
                <p class="hide" id="exampleMoreless">
                  Appealing to a different skill level and use case. Read through to see what suits
                  your particular needs.
                </p>
                <div class="example example-buttons">
                  <div>
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="button" data-more="#exampleMoreless">
                      <i class="icon wb-plus text" aria-hidden="true"></i>
                      <span class="text">More</span>
                      <i class="icon wb-minus text-active" aria-hidden="true"></i>
                      <span class="text-active">Less</span>
                    </button>
                  </div>

                  <div>
                    <button type="button" class="btn btn-success" data-toggle="button">
                      <i class="icon wb-upload text" aria-hidden="true"></i>
                      <span class="text">Upload</span>
                      <i class="icon wb-check text-active" aria-hidden="true"></i>
                      <span class="text-active">Success</span>
                    </button>
                    <button type="button" class="btn btn-default btn-outline" data-toggle="button">
                      <i class="icon wb-heart-outline text" aria-hidden="true"></i>
                      <i class="icon wb-heart text-active text-danger" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn btn-default btn-outline active" data-toggle="button">
                      <span class="text">
                        <i class="icon wb-thumb-up" aria-hidden="true"></i> 25
                      </span>
                      <span class="text-active">
                        <i class="icon wb-thumb-up text-danger" aria-hidden="true"></i>                        26
                      </span>
                    </button>
                  </div>

                  <div>
                    <div class="btn-group" data-toggle="buttons" role="group">
                      <label class="btn btn-outline btn-primary active">
                        <input type="radio" name="options" autocomplete="off" value="male" checked />
                        <i class="icon wb-check text-active" aria-hidden="true"></i>                        Male
                      </label>
                      <label class="btn btn-outline btn-primary">
                        <input type="radio" name="options" autocomplete="off" value="female" />
                        <i class="icon wb-check text-active" aria-hidden="true"></i>                        Female
                      </label>
                      <label class="btn btn-outline btn-primary">
                        <input type="radio" name="options" autocomplete="off" value="n/a" />
                        <i class="icon wb-check text-active" aria-hidden="true"></i>                        N/A
                      </label>
                    </div>
                  </div>

                  <div>
                    <div class="btn-group" data-toggle="buttons" role="group">
                      <label class="btn btn-primary active">
                        <input type="checkbox" name="multiples" value="apple" checked /> Apple
                      </label>
                      <label class="btn btn-primary active">
                        <input type="checkbox" name="multiples" value="banana" checked /> Banana
                      </label>
                      <label class="btn btn-primary">
                        <input type="checkbox" name="multiples" value="orange" /> Orange
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Example Button.Js Componenents -->
            </div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Stateful -->
              <div class="example-wrap">
                <h4 class="example-title">Stateful</h4>
                <p>Add <code>data-loading-text=&quot;Loading...&quot;</code> to use
                  a loading state on a button.</p>
                <div class="example">
                  <button type="button" class="btn btn-primary" id="exampleStatefulButton" data-loading-text="Loading...">
                    Loading state
                  </button>
                </div>
              </div>
              <!-- End Example Stateful -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Button Group -->

      <!-- Panel Ladda Buttons -->
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">Ladda Buttons
            <small><a class="example-plugin-link" href="http://msurguy.github.io/ladda-bootstrap/"
              target="_blank">official website</a></small>
          </h3>
        </div>

        <div class="panel-body container-fluid">
          <div class="row row-lg">
            <div class="col-lg-4 col-md-6">
              <!-- Example Expand -->
              <div class="example-wrap">
                <h4 class="example-title">Expand</h4>
                <div class="example example-buttons">
                  <div class="pull-left">
                    <button type="button" class="btn btn-info ladda-button" data-style="expand-left"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>Expand
                        left</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-success ladda-button" data-style="expand-right"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>Expand
                        right</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="expand-up"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>Expand
                        up</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-warning ladda-button" data-style="expand-down"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>Expand
                        down</span>
                    </button>
                  </div>
                </div>
              </div>
              <!-- End Example Expand -->
            </div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Zoom -->
              <div class="example-wrap">
                <h4 class="example-title">Zoom</h4>
                <div class="example example-buttons">
                  <div class="pull-left">
                    <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-zoom-in margin-right-10" aria-hidden="true"></i>Zoom
                        in</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-danger ladda-button" data-style="zoom-out"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-zoom-out margin-right-10" aria-hidden="true"></i>Zoom
                        out</span>
                    </button>
                  </div>
                </div>
              </div>
              <!-- End Example Zoom -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-lg-4 col-md-6">
              <!-- Example Progress -->
              <div class="example-wrap">
                <h4 class="example-title">Progress</h4>
                <div class="example example-buttons">
                  <div class="pull-left">
                    <button type="button" class="btn btn-success ladda-button" data-style="expand-left"
                    data-plugin="laddaProgress">
                      <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>Expand</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-warning ladda-button" data-style="zoom-in"
                    data-plugin="laddaProgress">
                      <span class="ladda-label"><i class="icon wb-zoom-in margin-right-10" aria-hidden="true"></i>Zoom</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-left"
                    data-plugin="laddaProgress">
                      <span class="ladda-label"><i class="icon wb-arrow-left margin-right-10" aria-hidden="true"></i>Slide</span>
                    </button>
                  </div>
                </div>
              </div>
              <!-- End Example Progress -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-md-6">
              <!-- Example Slide -->
              <div class="example-wrap margin-md-0">
                <h4 class="example-title">Slide</h4>
                <div class="example example-buttons">
                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-left"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-left margin-right-10" aria-hidden="true"></i>Slide
                        left</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-right"
                    data-plugin="ladda">
                      <span class="ladda-label">Slide right<i class="icon wb-arrow-right margin-left-10"
                        aria-hidden="true"></i></span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-up"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-up margin-right-10" aria-hidden="true"></i>Slide
                        up</span>
                    </button>
                  </div>

                  <div class="pull-left">
                    <button type="button" class="btn btn-primary ladda-button" data-style="slide-down"
                    data-plugin="ladda">
                      <span class="ladda-label"><i class="icon wb-arrow-down margin-right-10" aria-hidden="true"></i>Slide
                        down</span>
                    </button>
                  </div>
                </div>
              </div>
              <!-- End Example Slide -->
            </div>

            <div class="clearfix visible-md-block"></div>

            <div class="col-md-6">
              <!-- Example Sizing -->
              <div class="example-wrap">
                <h4 class="example-title">Sizing</h4>
                <div class="example example-buttons">
                  <button type="button" class="btn btn-primary btn-lg ladda-button" data-style="expand-left"
                  data-plugin="ladda">
                    <span class="ladda-label">Large</span>
                  </button>
                  <button type="button" class="btn btn-primary ladda-button" data-style="expand-left"
                  data-plugin="ladda">
                    <span class="ladda-label">Default</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-sm ladda-button" data-style="expand-left"
                  data-plugin="ladda">
                    <span class="ladda-label">Small</span>
                  </button>
                  <button type="button" class="btn btn-primary btn-xs ladda-button" data-style="expand-left"
                  data-plugin="ladda">
                    <span class="ladda-label">Tiny</span>
                  </button>
                </div>
              </div>
              <!-- End Example Sizing -->
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel Ladda Buttons -->
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Plugins For This Page -->
  <script src="../../global/vendor/ladda-bootstrap/spin.min.js"></script>
  <script src="../../global/vendor/ladda-bootstrap/ladda.min.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>

  <script src="../../global/js/components/buttons.min.js"></script>
  <script src="../../global/js/components/ladda-bootstrap.min.js"></script>


  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
      });
    })(document, window, jQuery);
  </script>



</body>

</html>